<template>
  <div class="features-page">
    <Header />
    
    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">功能特性</h1>
          <p class="hero-subtitle">
            提供完整的内网穿透和网络代理解决方案，支持多种协议和部署模式
          </p>
        </div>
      </div>
    </section>

    <!-- Features Overview -->
    <section class="features-overview">
      <div class="container">
        <div class="features-grid">
          <div class="feature-item" id="penetration">
            <div class="feature-header">
              <div class="feature-icon">
                <el-icon><Connection /></el-icon>
              </div>
              <h2 class="feature-title">内网穿透</h2>
            </div>
            <p class="feature-description">
              支持多种穿透模式，将内网服务安全地暴露到公网，实现远程访问和调试。
            </p>
            
            <div class="feature-details">
              <h3>穿透模式</h3>
              <div class="mode-grid">
                <div class="mode-card">
                  <h4>服务端渗透客户端</h4>
                  <p>将内网服务映射到公网，实现远程访问</p>
                  <div class="code-block">
                    <pre><code class="language-yaml"># 配置示例
visitor_port: 19080
real_host: 192.168.1.100
real_port: 18080</code></pre>
                  </div>
                </div>
                
                <div class="mode-card">
                  <h4>客户端渗透服务端</h4>
                  <p>本地端口映射到远程服务端端口</p>
                  <div class="code-block">
                    <pre><code class="language-yaml"># 配置示例
local_port: 13306
remote_port: 3306</code></pre>
                  </div>
                </div>
                
                <div class="mode-card">
                  <h4>客户端渗透客户端</h4>
                  <p>不同网络间的端口映射，实现异地组网</p>
                  <div class="code-block">
                    <pre><code class="language-yaml"># 配置示例
client_a_port: 8080
client_b_port: 9090</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="feature-item" id="proxy">
            <div class="feature-header">
              <div class="feature-icon">
                <el-icon><Share /></el-icon>
              </div>
              <h2 class="feature-title">网络代理</h2>
            </div>
            <p class="feature-description">
              提供 HTTP 和 SOCKS 代理服务，支持异地组网和网络加速。
            </p>
            
            <div class="feature-details">
              <h3>代理类型</h3>
              <div class="proxy-types">
                <div class="proxy-type">
                  <h4>HTTP 代理</h4>
                  <ul>
                    <li>支持 HTTP/HTTPS 协议</li>
                    <li>可配置代理认证</li>
                    <li>支持流量监控</li>
                    <li>端口：服务端 8001，客户端 8002</li>
                  </ul>
                </div>
                
                <div class="proxy-type">
                  <h4>SOCKS 代理</h4>
                  <ul>
                    <li>支持 SOCKS4/SOCKS5 协议</li>
                    <li>支持 TCP/UDP 代理</li>
                    <li>可配置认证机制</li>
                    <li>端口：服务端 9001，客户端 9002</li>
                  </ul>
                </div>
              </div>
              
              <div class="proxy-config">
                <h4>代理配置示例</h4>
                <div class="code-block">
                  <pre><code class="language-yaml">spring:
  lazy:
    netty:
      protocol:
        proxy:
          authentication: true
          enable-proxy-log: false
          socket-protocol-proxy:
            port: 9001
          http-protocol-proxy:
            port: 8001</code></pre>
                </div>
              </div>
            </div>
          </div>

          <div class="feature-item" id="monitor">
            <div class="feature-header">
              <div class="feature-icon">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <h2 class="feature-title">流量监控</h2>
            </div>
            <p class="feature-description">
              实时监控网络流量使用情况，提供详细的统计报表和分析。
            </p>
            
            <div class="feature-details">
              <h3>监控功能</h3>
              <div class="monitor-features">
                <div class="monitor-feature">
                  <h4>实时监控</h4>
                  <ul>
                    <li>监控每个客户端的实时流量</li>
                    <li>按端口统计流量使用情况</li>
                    <li>提供流量趋势图表</li>
                    <li>支持流量告警设置</li>
                  </ul>
                </div>
                
                <div class="monitor-feature">
                  <h4>报表功能</h4>
                  <ul>
                    <li>日流量统计报表</li>
                    <li>客户端流量排行</li>
                    <li>端口使用情况分析</li>
                    <li>历史数据查询</li>
                  </ul>
                </div>
              </div>
              
              <div class="monitor-stats">
                <h4>监控指标</h4>
                <div class="stats-grid">
                  <div class="stat-card">
                    <div class="stat-value">10,000+</div>
                    <div class="stat-label">并发连接</div>
                  </div>
                  <div class="stat-card">
                    <div class="stat-value">&lt; 10ms</div>
                    <div class="stat-label">平均响应时间</div>
                  </div>
                  <div class="stat-card">
                    <div class="stat-value">99.9%</div>
                    <div class="stat-label">系统可用性</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="feature-item" id="route">
            <div class="feature-header">
              <div class="feature-icon">
                <el-icon><Setting /></el-icon>
              </div>
              <h2 class="feature-title">路由管理</h2>
            </div>
            <p class="feature-description">
              支持虚拟路由和流量转发，实现灵活的网络配置。
            </p>
            
            <div class="feature-details">
              <h3>路由功能</h3>
              <div class="route-features">
                <div class="route-feature">
                  <h4>虚拟 IP 路由</h4>
                  <p>创建虚拟 IP 地址，将流量代理到目标地址</p>
                  <div class="code-block">
                    <pre><code class="language-yaml"># 虚拟路由配置
virtual_ip: 10.0.0.100
target_host: 192.168.1.100
target_port: 8080</code></pre>
                  </div>
                </div>
                
                <div class="route-feature">
                  <h4>流量转发规则</h4>
                  <ul>
                    <li>支持基于端口的转发</li>
                    <li>支持基于协议的转发</li>
                    <li>支持负载均衡</li>
                    <li>支持故障转移</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Security Features -->
    <section class="security-features">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">安全特性</h2>
          <p class="section-subtitle">多重安全机制，保障数据传输和访问安全</p>
        </div>
        
        <div class="security-grid">
          <div class="security-card">
            <div class="security-icon">
              <el-icon><Lock /></el-icon>
            </div>
            <h3>认证机制</h3>
            <ul>
              <li>Token 认证</li>
              <li>AppKey/AppSecret 认证</li>
              <li>代理认证</li>
              <li>动态密钥管理</li>
            </ul>
          </div>
          
          <div class="security-card">
            <div class="security-icon">
              <el-icon><Key /></el-icon>
            </div>
            <h3>加密传输</h3>
            <ul>
              <li>SSL/TLS 加密</li>
              <li>流量加密传输</li>
              <li>敏感信息加密存储</li>
              <li>支持自定义加密算法</li>
            </ul>
          </div>
          
          <div class="security-card">
            <div class="security-icon">
              <el-icon><User /></el-icon>
            </div>
            <h3>访问控制</h3>
            <ul>
              <li>基于角色的权限控制</li>
              <li>细粒度权限管理</li>
              <li>操作审计日志</li>
              <li>访问白名单</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { 
  Connection, 
  Share, 
  DataAnalysis, 
  Setting,
  Lock,
  Key,
  User
} from '@element-plus/icons-vue'

onMounted(() => {
  // 高亮代码块
  if (window.Prism) {
    window.Prism.highlightAll()
  }
})
</script>

<style lang="scss" scoped>
.features-page {
  min-height: 100vh;
}

// Hero Section
.hero {
  padding: 120px 0 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  
  .hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 32px;
    }
  }
  
  .hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
  }
}

// Features Overview
.features-overview {
  padding: 80px 0;
  background: var(--background-color);
}

.features-grid {
  max-width: 1000px;
  margin: 0 auto;
}

.feature-item {
  margin-bottom: 80px;
  
  .feature-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    
    .feature-icon {
      width: 60px;
      height: 60px;
      background: var(--primary-color);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .el-icon {
        font-size: 28px;
        color: white;
      }
    }
    
    .feature-title {
      font-size: 32px;
      font-weight: 700;
      color: var(--text-primary);
      
      @media (max-width: 768px) {
        font-size: 24px;
      }
    }
  }
  
  .feature-description {
    font-size: 18px;
    color: var(--text-regular);
    line-height: 1.6;
    margin-bottom: 30px;
  }
}

.feature-details {
  h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
  }
}

// Mode Grid
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.mode-card {
  background: var(--background-light);
  border-radius: 8px;
  padding: 20px;
  
  h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  
  p {
    color: var(--text-regular);
    margin-bottom: 12px;
  }
}

// Proxy Types
.proxy-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.proxy-type {
  h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  
  ul {
    list-style: none;
    
    li {
      color: var(--text-regular);
      margin-bottom: 6px;
      position: relative;
      padding-left: 16px;
      
      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--success-color);
        font-weight: bold;
      }
    }
  }
}

// Monitor Features
.monitor-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.monitor-feature {
  h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  
  ul {
    list-style: none;
    
    li {
      color: var(--text-regular);
      margin-bottom: 6px;
      position: relative;
      padding-left: 16px;
      
      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--success-color);
        font-weight: bold;
      }
    }
  }
}

// Stats Grid
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  text-align: center;
  padding: 20px;
  background: var(--background-light);
  border-radius: 8px;
  
  .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
  }
  
  .stat-label {
    color: var(--text-regular);
    font-size: 14px;
  }
}

// Route Features
.route-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.route-feature {
  h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  
  p {
    color: var(--text-regular);
    margin-bottom: 12px;
  }
  
  ul {
    list-style: none;
    
    li {
      color: var(--text-regular);
      margin-bottom: 6px;
      position: relative;
      padding-left: 16px;
      
      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--success-color);
        font-weight: bold;
      }
    }
  }
}

// Security Features
.security-features {
  padding: 80px 0;
  background: var(--background-light);
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  
  .section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 28px;
    }
  }
  
  .section-subtitle {
    font-size: 18px;
    color: var(--text-regular);
    max-width: 600px;
    margin: 0 auto;
  }
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.security-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: var(--shadow-light);
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
  }
  
  .security-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    
    .el-icon {
      font-size: 28px;
      color: white;
    }
  }
  
  h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
  }
  
  ul {
    list-style: none;
    
    li {
      color: var(--text-regular);
      margin-bottom: 8px;
      position: relative;
      padding-left: 16px;
      
      &::before {
        content: '✓';
        position: absolute;
        left: 0;
        color: var(--success-color);
        font-weight: bold;
      }
    }
  }
}
</style> 